<template>
  <div class="section">
    <div class="title-box flex">
      <p>首页</p>
      <el-button type="primary" size="small" @click="install">保存设置</el-button>
    </div>



  </div>
</template>
<style lang="less" scoped src="./index.less">

</style>
<script>
export default {
  name: 'marketing-editor',
  data() {
    return {
      // tabs
      tabsActiveName: 'first',
      // 表单
      goodsForm: { name: '', coverPicture: '', mod: [], modFileList: [] },
      goodsRules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        coverPicture: [
          { required: true, message: '请上传封面', trigger: 'change' }
        ],
      },
      goodsFormModDrag: { data: [], index: '' },
      // 模块
      lowCode: { commonData: [], },
      // 模块拖拽数据
      commonDrag: {
        data: '', index: ''
      },
      isDragover: false,
      // 秒杀select
      checkGood: '',
      checkGoodsMask: false,
      checkGoodsOptions: [{
        value: 'foot',
        label: '食品'
      }, {
        value: 'goods',
        label: '商品'
      }],
      checkGoodsOptionsSon: [],
      checkGoodsValue: '',
      checkGoodsValueSon: '',
      // 广告
      checkAd: '',
      checkAdMask: false,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogVisible2: false,
      // 表单验证
      rules: {
        name: [
          { required: true, message: '请输入文本', trigger: 'blur' },
          { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          },
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请至少选择一个选项', trigger: 'change' }
        ],
        checkbox: [
          { type: 'array', required: true, message: '请至少选择一个多选项', trigger: 'change' }
        ],
        select: [
          { required: true, message: '请至少选择一个选项', trigger: 'change' }
        ],
      },
      // 表单拖拽数据
      formDrag: {
        data: '', index: ''
      },
    }
  },
  computed: {
    commonDataCOM: function () {
      return this.lowCode.commonData
    },
  },
  mounted() {
    // this.$api.get_schema({ activity_id: 13 }).then(e => {
    //   this.lowCode.commonData = JSON.parse(e.data.replaceAll("&quot;", "\""))
    // })
  },
  methods: {
    /* 保存设置 */
    install() {
      this.$api.set_schema({ activity_id: 13, schema: JSON.stringify(this.lowCode.commonData) }).then(e => {
        console.log(e);
      })
    },
    /* goods封面上传按钮隐藏 */
    goodsUploadChange() {
      document.getElementById(`goodsUploadISlot`).style.display = 'none'
      let dom = document.getElementById(`goodsUploadISlot`).parentElement
      dom.style.width = '0px'
      dom.style.height = '0px'
    },
    /* goods封面删除 */
    goodsUploadRemove() {
      this.$refs.goodsUpload.clearFiles()
      setTimeout(() => {
        document.getElementById(`goodsUploadISlot`).style.display = 'inline-block'
        let dom = document.getElementById(`goodsUploadISlot`).parentElement
        dom.style.width = '120px'
        dom.style.height = '120px'
      }, 1100)
    },
    /* goods封面放大查看 */
    goodsUploadRemovePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    goodsFormUp(file, fileList) {
      let _this = this
      this.goodsForm.modFileList = fileList
      setTimeout(() => {
        let li = document.getElementById('goodsFormUp').getElementsByTagName('ul')[0].getElementsByTagName('li')
        for (let i = 0; i < li.length; i++) {
          li[i].draggable = 'true'
          li[i].ondragover = function (e) {
            e.preventDefault(); // 阻止默认行为
          }
          li[i].ondragstart = function () {
            // 记录第一个数据
            _this.goodsFormModDrag.data = fileList[i]
            _this.goodsFormModDrag.index = i
          }
          li[i].ondrop = function () {
            fileList[_this.goodsFormModDrag.index] = fileList[i] // 替换现在的
            fileList[i] = _this.goodsFormModDrag.data // 替换为第一个
            _this.goodsForm.modFileList = fileList
            _this.$forceUpdate()
          }
        }
      }, 500);
    },

    /* 添加模块 */
    addCommon(params) {
      let commonData = {}
      if (params == 'goods') {
        commonData = { type: 'goods', id: 'goods' + Date.now(), number: 0, money: 0 }
      } else if (params == 'ad') {
        commonData = { type: 'ad', id: 'ad' + Date.now(), file: '', fileList: [], url: '' }
      } else if (params == 'video') {
        commonData = { type: 'video', id: 'video' + Date.now(), file: '', fileList: [] }
      } else if (params == 'form') {
        commonData = { type: 'form', id: 'form' + Date.now(), formTitle: '', formSubmit: '', formModule: [] }
      }
      this.lowCode.commonData.push(commonData)
      // console.log(this.commonData);
      // console.log(this.form);
    },
    /* 删除模块 */
    delCommon(params) {
      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == params) {
          this.lowCode.commonData.splice(i, 1)
        }
      }
    },
    /* 模块drag 记录要换的数据*/
    commonDragStart(id) {
      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == id) {
          this.commonDrag.data = this.lowCode.commonData[i]
          this.commonDrag.index = i
        }
      }
    },
    /* 运行拖拽 */
    commonDragOver(event) {
      if (this.lowCode.commonData.length > 2) {
        this.isDragover = true
      }
      event.preventDefault();
      event.dataTransfer.effectAllowed = "move";
    },
    /* 替换 记录的数据 和 要换位的数据 */
    commonDragDrop(id) {
      console.log('item.id', id);
      let _data = this.lowCode.commonData[this.commonDrag.index] // 第一个数据
      let _commonDrag = {} // 第二个数据

      for (let i = 0; i < this.lowCode.commonData.length; i++) {
        if (this.lowCode.commonData[i].id == id) {
          _commonDrag.data = this.lowCode.commonData[i]
          _commonDrag.index = i
        }
      }

      let commonData = this.lowCode.commonData
      commonData[this.commonDrag.index] = commonData[_commonDrag.index]
      commonData[_commonDrag.index] = _data
      this.lowCode.commonData = commonData
      this.$forceUpdate()
    },
    /* 秒杀产品类型选择 */
    typeSelectChange() {
      let val = this.checkGoodsValue
      if (val == 'foot') {
        this.checkGoodsOptionsSon = [{
          value: '黄金糕',
          label: '黄金糕'
        }, {
          value: '双皮奶',
          label: '双皮奶'
        }, {
          value: '蚵仔煎',
          label: '蚵仔煎'
        }, {
          value: '龙须面',
          label: '龙须面'
        }, {
          value: '北京烤鸭',
          label: '北京烤鸭'
        }]
      } else if (val == 'goods') {
        this.checkGoodsOptionsSon = [{
          value: '星颜艺美门票',
          label: '星颜艺美门票'
        }, {
          value: '红妆门票',
          label: '红妆门票'
        }]
      }
    },
    /* 秒杀确认选择 */
    goodsSelectBtn() {
      if (this.checkGoodsValueSon) {
        this.checkGood.img = 'https://yunyi.ublue.xyz/admin/webSystem/nodata.png'
        this.checkGood.name = this.checkGoodsValueSon
        this.checkGood.money = Math.floor(Math.random() * 99 + 1) + 0.99

        for (let i = 0; i < this.lowCode.commonData.length; i++) {
          if (this.lowCode.commonData[i].id == this.checkGood.id) {
            this.lowCode.commonData[i] = this.checkGood
          }
        }
        this.checkGoodsMask = false
      } else {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        });
      }

    },
    /* 广告URL确认选择 */
    adSelectBtn(item) {
      console.log(item);
      if (item.url) {
        this.checkAdMask = false
      } else {
        this.$message({
          message: '请填写链接',
          type: 'warning'
        });
      }
    },
    /* 表单组件添加 */
    formModuleAdd(item, params) {
      let mod = {}
      if (params == '单行输入') {
        mod = {
          modId: params + Date.now(), modType: '单行输入', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
          ], modPlaceholder: ''
        }
      } else if (params == '多行输入') {
        mod = {
          modId: params + Date.now(), modType: '多行输入', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 1, message: '长度在 1 到 n 个字符', trigger: 'blur' }
          ], modPlaceholder: ''
        }
      } else if (params == '下拉选择') {
        mod = {
          modId: params + Date.now(), modType: '下拉选择', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请至少选择一个选项', trigger: 'change' }
          ], modArray: []
        }
      } else if (params == '单选') {
        mod = {
          modId: params + Date.now(), modType: '单选', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请至少选择一个选项', trigger: 'change' }
          ], modArray: []
        }
      } else if (params == '多选') {
        mod = {
          modId: params + Date.now(), modType: '多选', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { type: 'array', required: true, message: '请至少选择一个多选项', trigger: 'blur' }
          ], modArray: [], modValArray: []
        }
      } else if (params == '手机号') {
        mod = {
          modId: params + Date.now(), modType: '手机号', modTitle: '', modVal: '', modFillIn: false,
          modRules: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
              message: '请输入正确的手机号码或者座机号',
            },
          ], modPlaceholder: ''
        }
      }
      item.formModule.push(mod)
      console.log(this.lowCode.commonData);
      // this.$forceUpdate()
    },
    /* 表单组件删除 */
    formModuleDel(item, item2Index) {
      item.formModule.splice(item2Index, 1)
    },
    /* 表单drag 记录要换的数据*/
    formDragStart(item, item2Index) {
      this.formDrag.data = item.formModule[item2Index]
      this.formDrag.index = item2Index
    },
    /* 表单运行拖拽 */
    formDragOver(event, item) {
      if (item.formModule.length > 2) {
        this.isDragover = true
      }
      event.preventDefault();
      event.dataTransfer.effectAllowed = "move";
    },
    /* 表单替换 记录的数据 和 要换位的数据 */
    formDragDrop(item, item2Index) {
      let _data = item.formModule[this.formDrag.index] // 记录的数据（第一个）
      let _formDrag = item.formModule[item2Index] // 要换位的数据(第二个数据)

      item.formModule[this.formDrag.index] = _formDrag // 把第一个数据换成第二个
      item.formModule[item2Index] = _data // 把第二个数据换成第一个
      console.log('form', item.formModule);
      // this.$forceUpdate()
    },
    /* 表单提交 */
    formSubmit(item,) {
      for (let i in this.lowCode.commonData) {
        if (this.lowCode.commonData[i].formModule[0].modType == '多选' && this.lowCode.commonData[i].formModule[0].modFillIn == true) {
          this.lowCode.commonData[i].formModule[0].modVal = this.lowCode.commonData[i].formModule[0].modValArray
        }
      }
      this.$refs[item.id][0].validate().catch(err => {
        // console.log(err);
      })
    },
    /* 移除表单规则 */
    formReset(item, item2) {
      for (let i in this.lowCode.commonData) {
        if (this.lowCode.commonData[i].formModule[0].modType == '多选') {
          this.lowCode.commonData[i].formModule[0].modVal = ''
        }
      }
      this.$refs[item.id][0].clearValidate()
    },
    /* 表单单选增加 */
    formRadioAdd(item2) {
      item2.modArray.push({ label: '' })
    },
    /* 表单多选增加 */
    formChcekboxAdd(item2) {
      item2.modArray.push({ label: '' })
    }
  }
}
</script>
